﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.CodesModel
@{
    ViewData["Title"] = "字典管理";
    Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <div class="layui-col-220">
        <div class="layui-nav-title">字典管理　<button class="layui-btn layui-btn-sm" id="code-class-add"><i class="layui-icon"></i>添加</button></div>
        <ul id="code-tree" class="ztree layui-tree-cus"></ul>
        <div class="tree-footer">
            <button type="button" class="layui-btn layui-btn-sm" data-type="typeEdit"><i class="layui-icon"></i> 修改</button>
            <button type="button" class="layui-btn layui-btn-sm" data-type="typeDel"><i class="layui-icon"></i> 删除</button>
        </div>
    </div>
    <div class="right-col-body">
        <div class="list-wall">
            <div class="layui-form list-search">
                <button type="button" class="layui-btn layui-btn-sm" data-type="codeAdd"><i class="layui-icon"></i> 新增</button>
                <button type="button" class="layui-btn layui-btn-sm" data-type="codeDel"><i class="layui-icon"></i> 删除</button>
            </div>
            <table class="layui-hide" id="tablist" lay-filter="tool"></table>
        </div>
    </div>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="status" value="{{d.guid}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="statusedit" {{ d.status?'checked':''}}>
    </script>
    <link rel="stylesheet" href="~/themes/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <script>
        layui.config({
            base: '/themes/js/modules/'
        }).use(['table', 'layer', 'jquery', 'ztree', 'common'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    ztree = layui.ztree,
                    os = layui.common,
                    form = layui.form;
                table.render({
                    elem: '#tablist',
                    url: '/api/code/getpages',
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'name', title: '字典名称', sort: true, fixed: 'left' },
                            { field: 'codeType', title: '阈值' }, { field: 'sort', width: 150, title: '顺序', sort: true },
                            { field: 'status', width: 150, title: '状态', templet: '#switchTpl' },
                            { width: 100, title: '操作', templet: '#tool' }
                        ]
                    ],
                    page: { limits: [10, 20, 50, 100, 500, 1000, 5000, 10000], groups: 8 },
                    id: 'tables'
                });
                //监听状态操作
                form.on('switch(statusedit)', function (obj) {
                    var index = layer.load(1, {
                        shade: [0.1, '#000']
                    });
                    os.ajax('api/code/editstatus', { guid: this.value, status: obj.elem.checked }, function (res) {
                        if (res.statusCode === 200) {
                            os.success('状态更改成功~');
                            layer.close(index);
                        } else {
                            os.error(res.message);
                        }
                    });
                });
                var setting = {
                    async: {
                        enable: true,
                        url: "/api/codetype/gettree"
                    },
                    callback: {
                        onClick: onClick
                    }
                };
                var guid = '', typeName = '', active = {
                    reload: function () {
                        table.reload('tables',
                            {
                                page: {
                                    curr: 1
                                },
                                where: {
                                    guid: guid
                                }
                            });
                    },
                    typeEdit: function () {
                        os.Open('字典修改', '/fytadmin/sys/codesmodify/?guid=' + guid, '500px', '280px', function () {
                            $.fn.zTree.init($("#code-tree"), setting);
                        });
                    },
                    typeDel: function () {
                        layer.confirm('确定要删除 ' + typeName + ' 吗？', function (index) {
                            layer.close(index);
                            os.ajax('api/codetype/delete/', { guid: guid }, function (res) {
                                if (res.statusCode === 200) {
                                    $.fn.zTree.init($("#code-tree"), setting);
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });

                    },
                    codeAdd: function () {
                        if (!guid) {
                            os.error("请选择左侧字典类型~");
                            return;
                        }
                        os.Open('添加字典值', '/fytadmin/sys/codesvalmodify/?guid=' + guid, '620px', '370px', function () {
                            active.reload();
                        });
                    },
                    codeDel: function () {
                        var checkStatus = table.checkStatus('tables')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            os.warning("请选择要删除的项目~");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.guid + ",";
                        });
                        layer.confirm('确定要执行批量删除吗？', function (index) {
                            layer.close(index);
                            var loadindex = layer.load(1, {
                                shade: [0.1, '#000']
                            });
                            os.ajax('api/code/delete/', { parm: str }, function (res) {
                                layer.close(loadindex);
                                if (res.statusCode === 200) {
                                    active.reload();
                                    os.success('删除成功！');
                                } else {
                                    os.error(res.message);
                                }
                            });
                        });

                    }
                };
                //添加栏目
                $('#code-class-add').on('click',
                    function () {
                        os.Open('字典栏目', '/fytadmin/sys/codesmodify/', '500px', '280px', function () {
                            $.fn.zTree.init($("#code-tree"), setting);
                        });
                    });

                $.fn.zTree.init($("#code-tree"), setting);

                $('.tree-footer .layui-btn,.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                function onClick(event, treeId, treeNode, clickFlag) {
                    $(".tree-footer").addClass("active");
                    guid = treeNode.guid;
                    typeName = treeNode.name;
                    active.reload();
                }
                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        os.Open('编辑字典值', '/fytadmin/sys/codesvalmodify/?guid=' + data.guid, '620px', '370px', function () {
                            active.reload();
                        })
                    }
                });
            });
    </script>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon"></i> 修改</a>
    </script>
</div>

